<template>
  <el-tabs type="border-card">
	  <el-tab-pane label="订单处理">
      <div class="pane-box">
        <div v-show="trialShow">
          <el-form ref="ruleForm" :model="form" :rules="rules">
            <div class="trial" :class="scroll">
              <p>检查项</p>
              <div class="trial trial1 radio-box">
                <el-scrollbar>
                  <el-form-item :key="index" v-for="(val, index) in this.response" prop="radios[]">
                    <template>
                      <p>{{index+1}}. {{val}}</p>
                      <el-radio-group @change="allChoice()" :key="index" v-model="radios[index]">
                        <el-radio :label="1">通过</el-radio>
                        <el-radio :label="2">不通过</el-radio>
                      </el-radio-group>
                    </template>
                  </el-form-item>
                </el-scrollbar>
              </div>
            </div>
            <el-form-item class="textarea" label="初审备注"  prop="desc">
              <el-input type="textarea" @keyup.native="textKeyup($event)" v-model.trim="form.desc" resize="none" style="width: 100%"></el-input>
            </el-form-item>
          </el-form>

          <div class="use-botton" style="margin-top:20px;">
            <el-button type="primary" :disabled="rejectBtn == false" @click="reject">驳回</el-button>
            <el-button type="primary" :disabled="passBtn == false" @click="pass">通过</el-button>
            <el-button type="primary" :disabled="refundBtn == false" @click="refund">退款</el-button>
            <el-button type="primary" :disabled="saveBtn == false" @click="save('form')">保存</el-button>
          </div>
        </div>
        <!-- 驳回处理 -->
        <div v-show="rejectShow">
          <!-- <span class="back-link" @click="backBtn"><svg-icon icon-class="ds-left-double-arrow" /> 后退</span> -->
          <el-form ref="form" :model="form" label-width="80px">
            <!-- <div class="trial" :class="scroll"> -->
            <div class="trial">
              <p>话术分类</p>
                <el-select v-model="rejectSelect" placeholder="请选择" @change="getWordsList">
                  <el-option
                    v-for="item in options"
                    :key="item.type_id"
                    :label="item.sub_type_name"
                    :value="item.type_id">
                  </el-option>
                </el-select>
            </div>
            <div class="classify">
                <ul :class="optionClass">
                  <li v-for="(item, index) in wordList" v-bind:key="index" @click="wordClick(item.t_content)">{{item.t_title}}</li>
                </ul>
            </div>
            <el-form-item class="textarea" :label="titleText">
              <el-input type="textarea" @keyup.native="trickKeyup($event)" v-model="form.reject" resize="none" style="width: 100%"></el-input>
            </el-form-item>
          </el-form>

          <div class="use-botton">
            <el-button type="primary" @click="backBtn">取消</el-button>
            <el-button type="primary" @click="sureReject" :plain="rejectStatus == false" :disabled="rejectStatus == false" v-if="rejectName === 'reject'">驳回</el-button>
            <el-button type="primary" @click="refund" :plain="rejectStatus == false" :disabled="rejectStatus == false" v-else>退款</el-button>
          </div>
        </div>
      </div>
	  </el-tab-pane>

	  <el-tab-pane  class="check" label="审核记录">
      <div>
        <component :is="checkList" :oid="params.id"></component>
      </div>
	  </el-tab-pane>

	</el-tabs>
</template>

<script>
import { firstCheckList, firstCheckSubmit, firstGetSavecheck } from '@/api/order'
import { typeList, getWordsList } from '@/api/group'
import checklist from '@/components/logs/checklist' // 订单详情组件

export default {
  components: { checklist },
  data() {
    return {
      checkList: 'checklist',
      scroll: '',
      params: {
        id: this.$route.params.id
      },
      trialShow: true,
      rejectShow: false,
      rejectSelect: 61,
      response: null,
      rejectBtn: false,
      refundBtn: false,
      passBtn: false,
      saveBtn: false,
      wordList: null,
      optionClass: null,
      rejectStatus: false,
      rejectName: 'reject',
      saveHistory: false,
      titleText: '驳回话术',
      form: {
        newRadios: [],
        desc: '',
        reject: ''
      },
      radios: [],
      rules: {
        radios: [
          { required: true, message: '当前选项还没有选择', trigger: 'change' }
        ],
        desc: [
          { required: false, message: '请填写初审备注', trigger: 'blur' },
          { min: 0, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' }
        ]
      },
      options: []
    }
  },
  methods: {
    allChoice() {
      this.saveBtn = true
      for (let i = 0; i < this.response.length; i++) {
        if (typeof this.radios[i] === 'object' || typeof this.radios[i] === 'undefined') {
          this.rejectBtn = false
          this.passBtn = false
          this.refundBtn = false
          break
        } else {
          this.refundBtn = true
        }
      }
      if (this.refundBtn === true) {
        for (let i = 0; i < this.response.length; i++) {
          if (this.radios[i] === 2) {
            this.passBtn = false
            this.rejectBtn = true
            break
          } else {
            this.passBtn = true
            this.rejectBtn = false
          }
        }
      }
    },
    getList() {
      firstCheckList(this.params).then(response => {
        this.response = response.data.checklist
        this.saveHistory = response.data.have_savecheck
        for (var i = 0; i < this.response.length; i++) {
          this.form.newRadios.push({})
          this.$set(this.form.newRadios[i], this.response[i], false)
        }
        if (this.saveHistory === false) {
          return
        } else {
          this.saveBtn = true
        }
        firstGetSavecheck({ oid: this.$route.params.id }).then(response => {
          this.form.desc = response.data.check_remark
          for (let i = 0; i < this.response.length; i++) {
            this.radios.push([])
            if (response.data.check_item[i].length !== 0) {
              for (var key in response.data.check_item[i]) {
                this.radios[i] = response.data.check_item[i][key]
              }
            }
          }
          this.allChoice()
        })
      })
    },
    onSubmit() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          for (var i = 0; i < this.response.length; i++) {
            this.$set(this.form.newRadios[i], this.response[i], this.radios[i])
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    textKeyup(event) {
      if (this.form.desc) {
        this.saveBtn = true
      }
      if (event.keyCode === 8) {
        if (this.form.desc.length < 1) {
          this.saveBtn = false
        }
        for (let i = 0; i < this.response.length; i++) {
          if (typeof this.radios[i] !== 'undefined') {
            this.saveBtn = true
          }
        }
      }
    },
    trickKeyup(event) {
      if (this.form.reject) {
        this.rejectStatus = true
      }
      if (event.keyCode === 8) {
        if (this.form.reject.length < 1) {
          this.rejectStatus = false
        }
      }
    },
    sureReject() {
      const saveParams = {
        oid: this.$route.params.id,
        check_result: 1,
        check_remark: this.form.desc,
        reject_reason: this.form.reject,
        check_item: JSON.stringify(this.form.newRadios)
      }
      this.onSubmit()
      firstCheckSubmit(saveParams).then(response => {
        this.$router.push({ path: '/order/dashboard' })
      })
    },
    backBtn() {
      this.trialShow = true
      this.rejectShow = false
    },
    pass() {
      const saveParams = {
        oid: this.$route.params.id,
        check_result: 2,
        check_remark: this.form.desc,
        check_item: JSON.stringify(this.form.newRadios)
      }
      this.onSubmit()
      firstCheckSubmit(saveParams).then(response => {
        this.$router.push({ path: '/order/dashboard' })
      })
    },
    refund() {
      const saveParams = {
        oid: this.$route.params.id,
        check_result: 3,
        check_remark: this.form.desc,
        reject_reason: this.form.reject,
        check_item: JSON.stringify(this.form.newRadios)
      }
      this.onSubmit()
      firstCheckSubmit(saveParams).then(response => {
        this.$router.push({ path: '/order/dashboard' })
      })
    },
    refundHandle() {
      this.getRejectTag()
      this.rejectName = 'refund'
      this.titleText = '退款话术'
      this.trialShow = false
      this.rejectShow = true
    },
    save(formName) {
      const saveParams = {
        oid: this.$route.params.id,
        check_result: 0,
        check_remark: this.form.desc,
        check_item: this.form.newRadios
      }
      this.onSubmit()
      if (this.form.desc.length > 500) {
        this.rules.desc.required = true
        return
      } else {
        this.rules.desc.required = false
      }
      firstCheckSubmit(saveParams).then(response => {
        this.$router.push({ path: '/order/dashboard' })
      })
    },
    reject() {
      this.getRejectTag()
      this.trialShow = false
      this.rejectShow = true
      this.titleText = '驳回话术'
      this.rejectName = 'reject'
    },
    // 驳回处理
    getRejectTag() {
      typeList({ tid: 1 }).then(response => {
        this.options = response.data
        this.rejectSelect = response.data[0].type_id
        this.getWordsList()
      })
    },
    getWordsList() {
      getWordsList({ type_id: this.rejectSelect }).then(response => {
        this.wordList = response.data.data
        if (this.wordList.length === 0) {
          this.optionClass = 'option-height'
        } else {
          this.optionClass = 'option-auto'
        }
      })
    },
    wordClick(val) {
      this.form.reject = val
      this.rejectStatus = true
    }
  },
  mounted() {
    this.trialShow = true
    this.rejectShow = false
    this.getList()
    this.getRejectTag()
    this.getWordsList()
  }
}
</script>

<style scoped>
  .el-select{
    width: 96%
  }
  .check ul {
    padding-left: 0;
  }
  .check ul li{
    list-style: none;
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #dcdfe6;
  }
  .title{
    margin-bottom: 15px;
  }
  .title i{
    width: 22px;
    height: 22px;
    line-height: 22px;
    font-style: normal;
    display: inline-block;
    text-align: center;
    background-color: #109ef0;
    color: #fff;
    font-size: 16px;
    border-radius: 50%;
  }
  .title > span {
    font-size: 16px;
    margin-left: 10px;
    color: #303133;
  }
  .title p{
    float: right;
    color: #909090;
    font-size: 15px;
    margin:0;
    line-height: 22px;
  }
  .content {
    width: 100%;
    background-color: #f5f7fa;
    margin-top: 25px;
    border-radius: 5px;
    padding-bottom: 30px;
  }
  .content span:first-child {
    font-size: 14px;
    margin: 25px 0 25px 23px;
    display: inline-block;
    color: #909090;
  }
  .content span:nth-child(2) {
    float: right;
    color: #ff5f5f;
    margin:25px 23px 0 0;
    font-size: 14px;
  }
  .content p {
    width: 90%;
    margin:0 auto;
    padding: 15px;
    background-color: #fff;
    line-height: 1.5;
    border-radius: 5px;
    color: #303133;
    font-size: 14px;
  }
  .content div {
    width: 90%;
    margin:0 auto;
    padding: 15px;
    background-color: #f0f0fa;
    margin-top: 20px;
    line-height: 1.5;
    border-radius: 5px;
    color: #303133;
    font-size: 14px;
  }
  .content > div span:first-child {
    margin: 0;
    color: #666;
    border-bottom: 1px solid #8c8c8c;
    padding-bottom: 10px;
  }
  .content > div span:nth-child(2) {
    float: none;
    color: #666;
    display: inline-block;
    margin-top: 10px;
  }
  .option-height{
    height: 200px;
  }
  .option-auto {
    height: auto;
  }
  .el-button--primary.is-disabled, .el-button--primary.is-disabled:active, .el-button--primary.is-disabled:focus, .el-button--primary.is-disabled:hover {
    background-color: #ccc;
    border-color: #ccc;
    color: #fff;
  }
  .classify {
    font-size: 14px;
    background-color:#fff;
    padding-right: 20px;
  }
  .classify ul {
    border: 1px solid #dcdfe6;
    padding-left: 0;
    border-radius: 5px;
    background-color: #eeeeee;
    height: 302px;
    overflow: auto;
  }
  .classify ul > li {
    list-style: none;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .classify ul li:hover {
    background-color:  #d2d2d2;
  }
  ul > li:last-child {
    border:none;
  }
  .el-popper[x-placement^=bottom] {
    top: 300px;
  }
  .el-input--suffix .el-input__inner{
    padding-right: 260px;
  }
  .back-link{
    cursor: pointer;
  }
  .el-tabs--border-card>.el-tabs__content{
  	padding: 25px;
  }
  .el-radio__label{
  	margin-left: -30px;
  }
  .el-radio+.el-radio{
  	margin-left: 100px;
  }
  .radiogroup .el-radio {
    margin-right: 80px;
  }
  .trial {
  	width:100%;
  }
  .scroll-show{
  	max-height: 600px;
  	overflow-y: scroll;
  }
  .trial > p:before,.textarea .el-form-item__label:before{
  	content: "";
  	display: inline-block;
  	width: 4px;
  	height: 16px;
  	background: #109ef0;
  	position: relative;
    top: 2px;
    left: -5px;
  }
  .el-form-item{
  	margin-bottom: 0;
  	padding: 0 0;
  }
  .trial > p,.textarea .el-form-item__label{
  	text-indent: 5px;
  	color: #858585;
    font-weight: bold;
  	font-size: 16px;
  }
  .use-botton {
  	text-align: center;
  }
  .use-botton button {
  	width: 40%;
  	margin: 10px;
    display: inline-block;
  }
  .el-button--primary {
  	height: 50px;
  	font-size: 15px;
  }
  .choice{
    position: relative;
  }
  .choice .radio{
      position: relative;
      display: inline-block;
      font-weight: 400;
      padding-left: 25px;
      cursor: pointer;
  }
  .choice .radio:first-child {
    margin-right: 100px;
  }
  .choice .radio input{
      position: absolute;
      left: -9999px;
  }
  .choice .radio i{
      display: block;
      position: absolute;
      top: 1px;
      left: 0;
      width: 15px;
      height: 15px;
      outline: 0;
      border: 1px solid #dcdfe6;
      background: #fff;
      border-radius: 50%;
      transition: border-color .3s
  }
  .choice .radio i:hover {
    border-color: #409eff;
  }
  .choice .radio input:checked+i {
    background-color: #409eff;
  }
  .choice .radio input:checked+i:after {
    background-color: #fff;
  }
  .choice .radio input+i:after {
      position: absolute;
      content: '';
      top: 3px;
      left: 3px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background-color: #409eff;
      opacity: 0;
      transition: opacity .1s;
      -webkit-transition: opacity .1s;
  }
  .choice .radio input:checked+i:after {
      opacity: 1;
  }
</style>
